<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>向上无缝滚动</title>

    <!-- [[[[[Bootstrap CSS]]]]] -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"> -->

    <style>
        body {
            font-size: 12px;
            line-height: 24px;
            text-algin: center;
            /* 页面内容居中 */
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
            /* 去掉ul标签默认的点样式 */
        }

        a img {
            border: none;
            /* 超链接下，图片的边框 */
        }

        a {
            color: #333;
            text-decoration: none;
            /* 超链接样式 */
        }

        a:hover {
            color: #ff0000;
        }

        /* 底部样式 */
        #scrollBot {
            width: 399px;
            height: 10px;
            overflow: hidden;
            /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
        }

        /* 中间样式 */
        #scrollBox {
            height: 144px;
            width: 335px;
            margin-left: 25px;
            margin-top: 10px;
            overflow: hidden;
            /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
        }

        #scroll ul li {
            height: 24px;
        }

        #scroll ul li a {
            width: 180px;
            float: left;
            display: block;
            overflow: hidden;
            text-indent: 15px;
            height: 24px;
        }

        #scroll ul li span {
            float: right;
            color: #999;
        }
    </style>

</head>

<body>
    <div id="scroll">
        <!-- 中间 -->
        <div id="scrollBox" style="border: 1px solid #333;padding: 1rem;">
            <ul id="con1">
                <li><a href="#">1.学会html5 绝对的潘磕嫦（案例）</a><span>2013-09-18</span></li>
                <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
                <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
                <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
                <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
                <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
                <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
                <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
                <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
            </ul>
            <ul id="con2">
            </ul>
        </div>
        <!-- 中间结束 -->
    </div>
    <script src="./scroll.js"></script>
</body>

</html>